<!--  -->
<template>
  <div class="resoldDetail">
    <van-icon name="arrow-left" size="25" @click="goBack()" />
    <dl>
      <dt>
        <img :src="DetailData.img" alt="" class="bigImg" />
      </dt>
      <dd>
        <p>
          {{ DetailData.title }}&nbsp;&nbsp;<button @click="goVR()">VR</button>
        </p>
        <p class="price">
          {{ DetailData.price }}万&nbsp;&nbsp;3室2厅1卫&nbsp;&nbsp;101m²
        </p>
        <p>房源信息</p>
        <ul>
          <li>
            <span>单价</span>
            <span>{{ DetailData.num }}/元/m²</span>
          </li>
          <li>
            <span>朝向</span>
            <span>南</span>
          </li>
          <li>
            <span>装修</span>
            <span>精装修</span>
          </li>
          <li>
            <span>楼层</span>
            <span>高层/共18层</span>
          </li>
          <li>
            <span>类型</span>
            <span>高层住宅</span>
          </li>
          <li>
            <span>更新</span>
            <span>19分钟前</span>
          </li>
        </ul>
        <p class="feature">房源特色</p>
        <p class="info">{{ DetailData.info }}</p>
      </dd>
    </dl>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getResoldList } from "@/api";
import Button from "../../../../../客户端小程序/app/src/components/Button.vue";
export default {
  components: { Button },
  // 组件状态值
  data() {
    return {
      id: "",
      DetailData: {},
      search: "",
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    //返回上一级
    goBack() {
      this.$router.go(-1);
    },
    //跳转到直播页面
    goVR() {
      this.$router.push("/vr");
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  async created() {
    const res = await getResoldList({ value: this.search });
    console.log(res);
    this.id = this.$route.params.id;
    this.DetailData = res.data.data.find((item) => item.id == this.id);
    console.log(this.DetailData);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.resoldDetail {
  width: 100%;
  height: 100px;
  dl {
    width: 100%;
    img {
      width: 100%;
      height: 300px;
    }
    p:nth-child(1) {
      font-size: 25px;
      padding: 0 20px;
    }
    .price {
      color: orangered;
      padding: 0 20px;
      line-height: 50px;
    }
    p:nth-child(3) {
      font-size: 25px;
      font-weight: bold;
      padding: 0 20px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33%;
        display: flex;
        flex-direction: column;
        text-align: center;
        line-height: 30px;
        span:nth-child(1) {
          color: #999;
        }
      }
    }
    .feature {
      font-size: 25px;
      font-weight: bold;
      padding: 0 20px;
      line-height: 40px;
    }
    .info {
      color: #999;
      font-size: 14px;
      padding: 0 20px;
      line-height: 30px;
    }
  }
}
</style>
